<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="block">
    <div class="user-header rounded-sm text-center">
      <div class="pt-3 mx-auto avatar-box">
        <ma-upload v-model="userInfo.avatar" rounded />
      </div>
      <div>
        <a-tag size="large" class="mt-3 rounded-full" color="#165dff">
          {{ userStore.user && userStore.user.nickname || userStore.user && userStore.user.username }}
        </a-tag>
      </div>
    </div>

    <a-layout-content class="block lg:flex lg:justify-between">
      <div class="ma-content-block w-full lg:w-6/12 mt-3 p-4">
        <a-tabs type="rounded">
          <a-tab-pane key="info" title="个人资料">
            <user-infomation />
          </a-tab-pane>
          <a-tab-pane key="safe" title="安全设置">
            <modify-password />
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="ma-content-block w-full lg:w-6/12 mt-3 p-4 ml-0 lg:ml-3">
        <a-tabs type="rounded">
          <a-tab-pane key="login-log" title="登录日志">
            <a-timeline class="pl-5 mt-3"  v-if="(loginLogList && loginLogList.length)">
              <a-timeline-item
                :label="`地理位置；${item.ip_location}，操作系统：${item.os}`"
                v-for="(item, idx) in loginLogList"
                :key="idx"
              >
                您于 {{ item.login_time }} 登录系统，{{ item.message }}
              </a-timeline-item>
            </a-timeline>
            <a-empty v-else />
          </a-tab-pane>
          <a-tab-pane key="operation-log" title="操作日志">
            <a-timeline class="pl-5 mt-3" v-if="(operationLogList && operationLogList.length)">
              <a-timeline-item
                :label="`地理位置；${item.ip_location}，方式：${item.method}，路由：${item.router}`"
                v-for="(item, idx) in operationLogList"
                :key="idx"
              >
                您于 {{ item.created_at }} 执行了 {{ item.service_name }}
              </a-timeline-item>
            </a-timeline>
            <a-empty v-else />
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-layout-content>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted, watch } from 'vue'
  import MaUpload from '@cps/ma-upload/index.vue'
  import { useUserStore } from '@/store'
  import { Message } from '@arco-design/web-vue'
  import user from '@/api/system/user'
  import commonApi from '@/api/common'

  import ModifyPassword from './components/modifyPassword.vue'
  import UserInfomation from './components/userInfomation.vue'

  const userStore = useUserStore()
  const userInfo = reactive({
    ...userStore.user
  })

  const loginLogList = ref([])
  const operationLogList = ref([])

  const requestParams = reactive({
    username: userStore.user.username,
    pageSize: 5
  })

  onMounted(() => {
    commonApi.getLoginLogList( Object.assign(requestParams, { orderBy: 'login_time', orderType: 'desc' }) ).then(res => {
      loginLogList.value = res.data.items
    })

    commonApi.getOperationLogList( Object.assign(requestParams, { orderBy: 'created_at', orderType: 'desc' }) ).then(res => {
      operationLogList.value = res.data.items
    })
  })

  userInfo.avatar = (userStore.user && userStore.user.avatar) ? userStore.user.avatar : `${import.meta.env.VITE_APP_BASE}avatar.jpg`

  watch(
    () => userInfo.avatar,
    async newAvatar => {
      if (newAvatar) {
        const response = await user.updateInfo({ id: userInfo.id, avatar: newAvatar })
        if (response.success) {
          Message.success('头像修改成功')
          userStore.user.avatar = newAvatar
        }
      }
    }
  )

</script>
<script>
export default { name: 'userCenter' }
</script>

<style scoped>
.avatar-box {
  width: 130px;
}
.user-header {
  width: 100%;
  height: 200px;
  background: url('@/assets/userBanner.jpg') no-repeat;
  background-size: cover;
}
</style>
